<template>
  <view :data-theme="globPrimary">
    <u-navbar title="加入的课程">
      <u-icon
        slot="right"
        name="shaixuan"
        custom-prefix="edu-icon"
        size="40"
        class="navbar-icon"
        :color="showScreening ? globPrimaryColor : '#303133'"
        @click="showScreening = !showScreening"
      ></u-icon>
    </u-navbar>
    <view class="course-wrapper">
      <view class="tabs-box">
        <u-tabs-swiper
          :activeColor="globPrimaryColor"
          ref="tabs"
          :list="tabList"
          :current="current"
          @change="change"
          :bold="false"
          :is-scroll="false"
          swiperWidth="750"
        ></u-tabs-swiper>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(page, index) in tabList" :key="index"
          ><courseItem :ref="`course${page.val}`" :value="page.val"></courseItem
        ></swiper-item>
      </swiper>
    </view>
    <u-popup v-model="showScreening" mode="top" z-index="900" :custom-style="{ top: '44px' }">
      <view class="screening-box">
        <view
          class="screening-cell u-border-bottom"
          :class="screeningStatus == item.val ? 'active' : ''"
          v-for="(item, index) in screeningList"
          :key="item.val"
          @click="handleScreening(item.val)"
        >
          {{ item.name }}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import courseItem from './course-item.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseItem,
  },
  data() {
    return {
      tabList: [
        {
          name: '点播',
          val: 1,
        },
        {
          name: '直播',
          val: 2,
        },
        {
          name: '面授',
          val: 3,
        },
        {
          name: '班级',
          val: 4,
        },
      ],
      current: 0,
      swiperCurrent: 0,
      dx: 0,
      showScreening: false,
      screeningList: [
        {
          name: '全部',
          val: 'all',
        },
        {
          name: '未开始',
          val: 'not_started',
        },
        {
          name: '学习中',
          val: 'learning',
        },
        {
          name: '已完成',
          val: 'finished',
        },
      ],
      screeningVal: ['all', 'all', 'all', 'all'],
      screeningStatus: 'all',
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    // tab栏切换
    change(index) {
      this.swiperCurrent = index
      this.screeningStatus = this.screeningVal[index]
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    handleScreening(val) {
      this.showScreening = false
      if (this.screeningStatus == val) return
      this.screeningVal[this.current] = val
      this.screeningStatus = val
      if (this.current == 0) {
        this.$refs.course1[0].changeScreening(val)
      } else if (this.current == 1) {
        this.$refs.course2[0].changeScreening(val)
      } else if (this.current == 2) {
        this.$refs.course3[0].changeScreening(val)
      } else if (this.current == 3) {
        this.$refs.course4[0].changeScreening(val)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar-icon {
  margin-right: 30rpx;
}
.course-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px - var(--window-top));
  width: 100%;
  background-color: #fff;
  .tabs-box {
    padding: 0 30rpx;
  }
  .swiper-box {
    flex: 1;
  }
}
.screening-box {
  padding: 0 30rpx;
  background-color: #ffffff;
  .screening-cell {
    height: 86rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    &.active {
      @include text-color();
    }
  }
}
</style>
